<script src="/vue.js"></script>

<div id="app">
    <button @click="add">添加</button>
    <input type="text" name="" id="" v-on:keyup.enter="onEnter">
    <button @click="onEnter">搜索</button>
    <table border="1">
        <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>联系电话</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in teacherList">
            <td>{{item.cord}}</td>
            <td>{{item.name}}</td>
            <td>{{item.phone}}</td>
            <td>
                <button v-on:click="update">修改</button>
                <button v-on:click="del">删除</button>
            </td>
        </tr>
    </table>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            teacherList: [],
        },
        methods: {
            add() {
                var teacher = {
                    cord: "001",
                    name: "李老师",
                    phone: "15231038719"
                }
                this.teacherList.push(teacher);
            },

            del() {
                this.teacherList.pop();
            },

            update() {
                console.log("显示模态框编辑信息");
            },

            onEnter() {
                console.log("开始查询");
            }
        }
    })
</script>

<style>

</style>